<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="/js/vue.js"></script>  <!-- vue 路径-->
</head>

<body>
    
    <div id ="app"></div>
    <!-- 什么是生命周期 -->
    <!-- 每一个vue程序都会经历从创建、挂载、更新、卸载一系列过程 -->
    <!-- 如果你想参与其中，就需要vue提供的叫做勾子函数 -->
    <p>{{msg}}</p>
    <script>
     //创建Vue实例,得到 ViewModel
     let app = new Vue({
        el: '#app',
        data: {
            msg:'hello world'
        },
        methods: {
            show(){
                console.log('show');
            }
        },
        beforeCreate(){
            //第一个生命周期函数，表示实例完全被创建之前会执行的函数
            //console.log(this.msg);  //因为在beforeCreate之前还没有对data和methods进行初始化
            //this.show();
            console.log("beforeCreate");
        },
        created(){
            //第二个生命周期函数，在created函数之前，data和methods初始化完毕
            //如果只对data或methods操作一次，一般考虑在created生命周期中去执行
            console.log(this.msg);
            this.show();
            console.log("Create");
        },
        beforeMount(){
            //第三个生命周期函数，表示模版已经在内存中编译完成了，都是尚未渲染到页面中
            console.log(document.getElementById("p").innerText);
            console.log("beforeMount");
        },
        mounted(){
            //第四个生命周期函数，表示模版已经在内存中编译完成了且渲染到页面中
            console.log(document.getElementById("p").innerText);
            console.log("mounted");
        },
        beforeUpdate(){
            //第五个生命周期函数，表示界面没有更新，但是数据已经发生改变
            console.log(document.getElementById("p").innerText);
            console.log("update");
        },
        updated(){
            //第六个生命周期函数，表示界面更新的同时，数据已发生改变
            console.log(document.getElementById("p").innerText);
            console.log("updated");
        },
        beforeDestroy(){
            //第七个生命周期函数，表示实例未销毁前调用
            console.log("beforeDestory");
        },
        destroyed(){
            //第八个生命周期函数，表示实例销毁后调用
            console.log("destoryed");
        }
     });

     app.$destroy()
    </script>
</body>

</html>